<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>Student Data</title>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/global.css">
    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/moment.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/global.js"></script>
</head>
<body>
<br>
<div class="layui-fluid">
    <div class="lay-row">
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">查询条件</h2>
                    <div class="layui-colla-content layui-show">
                        <br>
                        <!-- 搜索条件表单 -->
                        <form class="layui-form">
                            <div class="layui-form-item layui-input-inline">
                                <label class="layui-form-label">学工号:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="jobNo" placeholder="请输入学号" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-input-inline">
                                <label class="layui-form-label">姓名:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" placeholder="请输入姓名" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-input-inline">
                                <label class="layui-form-label">电话:</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="phone" placeholder="请输入电话"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-input-inline">
                                <label class="layui-form-label">所在班级:</label>
                                <div class="layui-input-inline">
                                    <select name="classId" id="class_sel">
                                        <option selected></option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-input-inline">
                                <div class="layui-input-inline">
                                    <button class="layui-icon layui-icon-search layui-btn layui-bg-blue"
                                            lay-submit
                                            type="submit"
                                            lay-filter="sreach_form">
                                        查询
                                    </button>
                                    <button class="layui-icon layui-icon-read layui-btn layui-btn-primary"
                                            type="reset">
                                        重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lay-row">
        <div class="layui-col-md12">
            <table id="tb" lay-filter="tb" class="layui-table"></table>
        </div>
    </div>
</div>

<!-- toolbar模板 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button id="addBtn" class="layui-icon layui-icon-add-circle layui-btn layui-bg-green" lay-event="add"> 新增
        </button>
        <button id="deleteBatches" class="layui-icon layui-icon-delete layui-btn layui-bg-red" lay-event="del">
            批量删除
        </button>
    </div>
</script>
<!--tool模板-->
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<!-- 添加新数据模板 -->
<script type="text/html" id="add">
    <div class="padding">
        <form class="layui-form" id="add_form">
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">学号:</label>
                <div class="layui-input-inline">
                    <input type="text" name="jobNo" lay-verify="required" placeholder="请输入学号" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-inline">
                    <input type="text" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-inline">
                    <input type="radio" name="gender" value="男" title="男">
                    <input type="radio" name="gender" value="女" title="女" checked>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">生日:</label>
                <div class="layui-input-inline">
                    <input id="birthDay" type="text" name="birthDay" placeholder="请输入生日" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">地址:</label>
                <div class="layui-input-inline">
                    <input type="text" name="address" placeholder="请输入地址" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">电话:</label>
                <div class="layui-input-inline">
                    <input type="phone" maxlength="11" name="phone" placeholder="请输入电话"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">年份:</label>
                <div class="layui-input-inline">
                    <input type="text" name="enrollmentYear" placeholder="请输入入学年份" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">班级:</label>
                <div class="layui-input-inline">
                    <select name="classId" id="add_class_sel">
                        <option selected></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <label class="layui-form-label">类型:</label>
                <div class="layui-input-inline">
                    <select name="personTypeId" lay-verify="required" id="add_persontype_sel">
                        <option selected></option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="remark" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-input-inline">
                <div class="layui-input-inline">
                    <input class="layui-icon layui-icon-search layui-btn layui-bg-blue"
                           lay-submit
                           type="hidden"
                           lay-filter="add_form"
                           id="add_form_btn">
                </div>
            </div>
        </form>
    </div>
</script>
<!-- 班级列的select模板 -->
<script type="text/html" id="class_col">
    <select id="class_col_sel" style="z-index:9999;">
    </select>
</script>

<!--js-->
<script>
    layui.use(['table', 'element', 'form', 'layer', 'laydate', 'laytpl'], async function () {
        let table = layui.table,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            laytpl = layui.laytpl

        let curPerson
        let classInfos;
        let personTypes;
        let ADD_PRIVILEGE = false
        let UPDATE_PRIVILEGE = false
        let DELETE_PRIVILEGE = false

        await created()

        // 渲染表格
        table.render({
            elem: '#tb'
            , height: 650
            , url: api.person.get //数据接口
            , where: (() => {
                // 如果是学生查询条件就加入自己的id, 否则查所有
                let personTypeId = curPerson?.personTypeId
                if (personTypeId == 'persontype003') {
                    return {
                        id: curPerson.id
                    }
                    // 如果是老师则只能看学生信息
                } else if (personTypeId == 'persontype002') {
                    return {
                        personTypeId: 'persontype003'
                    }
                } else {
                    return null
                }
            })()
            , headers: {
                'Cur-Person-Id': curPerson.id
            }
            , title: '学生信息表'
            , page: false // 开启分页
            , toolbar: '#toolbar'
            , cols: (() => {
                let col = [
                    {type: 'checkbox', fixed: 'left'}
                    // , {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'}
                    , {field: 'jobNo', title: '学工号', width: 140, fixed: 'left'}
                    , {field: 'name', title: '姓名', edit: UPDATE_PRIVILEGE}
                    , {field: 'password', title: '密码', edit: UPDATE_PRIVILEGE}
                    , {field: 'gender', title: '性别', width: 100, edit: UPDATE_PRIVILEGE}
                    , {field: 'birthDay', title: '生日', sort: true, edit: UPDATE_PRIVILEGE}
                    , {field: 'address', title: '地址', edit: UPDATE_PRIVILEGE}
                    , {field: 'phone', title: '电话', edit: UPDATE_PRIVILEGE}
                    , {field: 'enrollmentYear', title: '入校年份', width: 110, sort: true, edit: UPDATE_PRIVILEGE}
                    , {field: 'className', title: '班级', edit: UPDATE_PRIVILEGE}
                    , {field: 'remark', title: '备注', edit: UPDATE_PRIVILEGE}
                ]
                if (DELETE_PRIVILEGE) {
                    col.push({fixed: 'right', title: '工具', width: 100, align: 'center', toolbar: '#tool'})
                }
                return [col]
            })()
            , parseData: function (res) {
                let students = res.data.map(s => ({
                    id: s.id || null,
                    jobNo: s.jobNo || null,
                    password: s.password || null,
                    name: s.name || null,
                    gender: s.gender || null,
                    birthDay: moment(s.birthDay).format("YYYY-MM-DD") || null,
                    address: s.address || null,
                    phone: s.phone || null,
                    enrollmentYear: s.enrollmentYear || null,
                    classId: s.classId || null,
                    remark: s.remark || null,
                    className: classInfos.find(c => c.id == s.classId)?.className || null
                }))
                return {
                    code: res.code,
                    msg: res.msg,
                    count: students.length,
                    data: students
                }
            }
            , done: () => {
                // 判断是否要显示批量删除按钮, 单个删除的按钮在table中已经处理了
                if (!DELETE_PRIVILEGE) {
                    $("#deleteBatches").remove()
                }
                // 是否要移除增加按钮
                if (!ADD_PRIVILEGE) {
                    $('#addBtn').remove()
                }
            }
        });

        // 监听头工具栏
        table.on('toolbar(tb)', async function (obj) {
            let checkStatus = table.checkStatus(obj.config.id)
                , checkedData = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'add':
                    // 弹出新增用户的大框框
                    layer.open({
                        type: 1 //Page层类型
                        , area: ['1000px', '500px']
                        , title: '添加用户'
                        , shade: 0.6 //遮罩透明度
                        , maxmin: true //允许全屏最小化
                        , anim: 4 //0-6的动画形式，-1不开启
                        , content: $('#add').html(),
                        btn: ['添加', '算了'],
                        success: () => {
                            classInfos.forEach(o => $('#add_class_sel').append(new Option(o.className, o.id)))
                            personTypes.forEach(o => $('#add_persontype_sel').append(new Option(o.personTypeName, o.id)))
                            form.render()
                            laydate.render({
                                elem: '#birthDay'
                                , format: 'yyyy-MM-dd'
                            });
                        },
                        yes: async () => {
                            // 模拟点击add_form的提交按钮
                            $("#add_form_btn").click()
                        },
                        btn2: () => {
                            layer.closeAll()
                        }
                    });
                    break;
                case 'del':
                    // 批量删除
                    if (checkedData.length === 0) {
                        layer.msg('请至少选择一行');
                    } else {
                        layer.confirm('真的要删除所勾选的数据吗', async function (index) {
                            layer.load()
                            if ((await del(...checkedData.map(o => o.id)))) {
                                layer.closeAll()
                                layer.msg('删除成功', {icon: 6})
                            } else {
                                layer.closeAll()
                                layer.msg('删除失败', {icon: 5})
                            }
                            table.reload('tb')
                        })
                    }
                    break;
            }
        });
        // 监听工具条
        table.on('tool(tb)', function ({event, data: o}) {
            switch (event) {
                case 'del':
                    layer.confirm('真的删除行么', async function (index) {
                        layer.load()
                        if ((await del(o.id))) {
                            layer.closeAll()
                            layer.msg('删除成功', {icon: 6})
                        } else {
                            layer.closeAll()
                            layer.msg('删除失败', {icon: 5})
                        }
                        table.reload('tb')
                    })
                    break
            }
        })
        // 渲染表单
        form.render()
        // 搜索表单
        form.on('submit(sreach_form)', function (data) {
            table.reload('tb', {
                url: api.person.getLike,
                where: {
                    ...data.field
                }
            })
            return false;
        })
        // add模板表单的submit事件
        form.on('submit(add_form)', async function (data) {
            let loading = layer.load()
            let isOk = await add(data.field)
            if (isOk) {
                layer.close(loading)
                layer.msg('添加成功')
                table.reload('tb')
            }
            layer.closeAll()
            return false;
        })
        // 监听edit工具
        table.on('edit(tb)', async function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            layer.load()
            switch (field) {
                case 'className':
                    await upd({id: data.id, classId: classInfos.find(c => c.className == value).id})
                    break
                default:
                    await upd({id: data.id, [field]: value})
                    break
            }
            layer.closeAll()
        });

        // add方法
        async function add(o) {
            return (await axios.get(api.person.add, {params: {...o}})).data.data
        }

        // del方法
        async function del(...ids) {
            return (await axios.delete(api.person.del, {data: ids})).data.data
        }

        // upd方法
        async function upd(o) {
            return (await axios.get(api.person.upd, {params: {...o}})).data.data
        }

        // Created方法
        async function created() {
            // 加载各种码表
            classInfos = (await axios(api.class.get)).data.data
            personTypes = (await axios(api.personType.get)).data.data
            // select框使用这些码表
            classInfos.forEach(o => $('#class_sel').append(new Option(o.className, o.id)))
            // 当前页面有哪些权限, 对应的置位true
            curPerson = localWareHouse.get('curPerson')
            ADD_PRIVILEGE = curPerson.abilities.some(code => code == 'ADD_STUDENT')
            UPDATE_PRIVILEGE = curPerson.abilities.some(code => code == 'UPDATE_STUDENT')
            DELETE_PRIVILEGE = curPerson.abilities.some(code => code == 'DELETE_STUDENT')
        }

    })// layui.use...
</script>
</body>
</html>